function init(){
let house1=document.querySelector('#pianhao>input');//获取输入框input
let xinXi=document.querySelector('#tr1');//获取table下面的第二个tr
let Btn_ChXun=document.querySelector('#chaxun');//查询按钮
let Btn_ChonGzi=document.getElementById('chongzhi');//重置按钮
//option默认值
let XiaLa=document.querySelectorAll('form>div>div>select>option:nth-child(1');
let Btn_shan=document.querySelectorAll('#xinxi tr button:nth-child(2)');//删除按
let addEmpButton = document.getElementById('addEmpButton'); //获取按钮提交
let zhaShang=document.querySelector('#zhaoshangtianjia a'); //获取外部添加按钮
let display1=document.getElementById('display1');//获取弹出添加内容区
let display2=document.getElementById('display2');//获取弹出修改内容区
let addEmpButton1 = document.getElementById('addEmpButton1');//获取取消按钮
let addEmpButton4 = document.getElementById('addEmpButton4');//获取修改取消按钮
let addEmpButton3 = document.getElementById('addEmpButton3');//获取修改按钮
let btn_BiAnJi=document.querySelectorAll('#xinxi tr button:nth-child(1)');//编辑
let table=document.querySelectorAll('#xinxi tr');
let TiShi=document.getElementById('tishi');//获取提示
console.log(table);

Focus();//获取焦点
Query();// 查询
Reset();// 重置
Delete();// 删除
Add();//添加
DisplAy();//显示添加功能区
BiAnJi();//编辑



//获取焦点
function Focus(){
    console.log(house1)
    house1.onfocus=function(){
        if(house1.value=='请输入房屋编号'){
        house1.value='';
    }
}
    house1.onblur=function(){
        if( house1.value==''){
            house1.value='请输入房屋编号';
        }else{
            house1.value=house1.value;
        }
    }
}

 // 查询
 function Query() {
    Btn_ChXun.onclick=function(){
        for(let i=0;i<cards.length;i++){//循环数组内的数据判断用户输入的数据
        if(house1.value==cards[i].house||house1.value==cards[i].area||house1.value==cards[i].name){
            let tr=document.createElement('tr');//创建tr
            // console.log(tr);
         tr.innerHTML=//给创建的tr内添加td
        ` <td><input type="checkbox" name="" id=""></td>
        <td>${cards[i].serial}</td>
        <td>${cards[i].house}</td>
        <td>${cards[i].subject}</td>
        <td>${cards[i].region}</td>
        <td>${cards[i].name}</td>
        <td>${cards[i].type}</td>
        <td>${cards[i].rent}</td>
        <td>${cards[i].area}</td>
        <td>${cards[i].shelf}</td>
        <td>${cards[i].condition}</td>
        <td><button>编辑</button><button>删除</button></td>`;
    let xinxi1=document.getElementById('xinxi');//获取table
    let tbody=xinxi1.getElementsByTagName('tbody')[0];
    //把创建的tr添加到第一个表格下面获取tbody第一个元素节点下面的兄弟元素
    xinXi.remove(xinXi);
    tbody.replaceChild(tr,tbody.firstElementChild.nextSibling);
    TiShi.innerHTML='';
    let bt=tr.querySelector('button:nth-child(1)');//编辑
    console.log(bt);
    //给动态添加的按钮添加编辑事件
    bt.onclick=function(){

        display2.style.display='block';
        addEmpButton4.onclick=function(){
            display2.style.display='none';
         }
        // addEmpButton.innerHTML='修改';
        // hea.innerHTML='修改';
        // addEmpButton.onclick=null;
        let ps=this.parentNode.parentNode.children[2];
        let ps1=this.parentNode.parentNode.children[3];
        let ps2=this.parentNode.parentNode.children[4];
        let ps3=this.parentNode.parentNode.children[5];
        let ps4=this.parentNode.parentNode.children[6];
        let ps5=this.parentNode.parentNode.children[7];
        let ps6=this.parentNode.parentNode.children[8];
        let ps7=this.parentNode.parentNode.children[9];
        // let ps8=this.parentNode.parentNode.children[9];
        


        let test1=document.querySelector('#test2>p:nth-child(1)>input').value=ps.innerHTML;
        let test2=document.querySelector('#test2>p:nth-child(2)>input').value=ps1.innerHTML;;
        let test3=document.querySelector('#test2>p:nth-child(3)>input').value=ps2.innerHTML;;
        let test4=document.querySelector('#test2>p:nth-child(4)>input').value=ps3.innerHTML;;
        let test5=document.querySelector('#test2>p:nth-child(5)>input').value=ps4.innerHTML;;
        let test6=document.querySelector('#test2>p:nth-child(6)>input').value=ps5.innerHTML;;
        let test7=document.querySelector('#test2>p:nth-child(7)>input').value=ps6.innerHTML;;
        let test8=document.querySelector('#test2>p:nth-child(8)>input').value=ps7.innerHTML;
        // let test9=document.querySelector('#test1>input').name=ps7.;
        
        // this.replaceChild(test1,this);
        for(let i=0;i<btn_BiAnJi.length;i++){
            let tr=this.parentNode.parentNode.children[2];
            let tr1=this.parentNode.parentNode.children[3];
            let tr2=this.parentNode.parentNode.children[4];
            let tr3=this.parentNode.parentNode.children[5];
            let tr4=this.parentNode.parentNode.children[6];
            let tr5=this.parentNode.parentNode.children[7];
            let tr6=this.parentNode.parentNode.children[8];
            let tr7=this.parentNode.parentNode.children[9];

          let tes1=document.querySelector('#test2>p:nth-child(1)>input');
          let tes2=document.querySelector('#test2>p:nth-child(2)>input');
          let tes3=document.querySelector('#test2>p:nth-child(3)>input');
          let tes4=document.querySelector('#test2>p:nth-child(4)>input');
          let tes5=document.querySelector('#test2>p:nth-child(5)>input');
          let tes6=document.querySelector('#test2>p:nth-child(6)>input');
          let tes7=document.querySelector('#test2>p:nth-child(7)>input');
          let tes8=document.querySelector('#test2>p:nth-child(8)>input');
            
            
            addEmpButton3.onclick=function(){
            tr.innerHTML=tes1.value;
            tr1.innerHTML=tes2.value;
            tr2.innerHTML=tes3.value;
            tr3.innerHTML=tes4.value;
            tr4.innerHTML=tes5.value;
            tr5.innerHTML=tes6.value;
            tr6.innerHTML=tes7.value;
            tr7.innerHTML=tes8.value;
            display2.style.display='none';
           }
      
       }

    };

        let btnS=tr.querySelector('button:nth-child(2)');//获取动态添加的tr下面的删除按钮

            btnS.onclick=function(){//绑定点击事件生成的按钮重新绑定删除
            //    alert(btnS);
                let tr1=this.parentNode.parentNode;
                // let fa = confirm('确认删除吗');
                // if (fa) {
                    // 删除tr  removeChild()
                    tr1.parentNode.removeChild(tr);
                // }
            }
            return;
        }else{ 
            TiShi.innerHTML=`<span class='iconfont icon-cuowu'>
            </span>有误`;
            TiShi.style.color='#f35570'
            house1.onfocus=function(){
                house1.value='';
                TiShi.innerHTML='';
            }
          }
        }
     }
  }
 
 // 重置
 function Reset() {
    Btn_ChonGzi.onclick=function(){
        house1.value='请输入房屋编号';
        for(let i=0;i<=XiaLa.length;i++){
            XiaLa[i].selected=true;
        }
    }
 }
 
// 删除
function Delete(){
    for(let i=0;i<Btn_shan.length;i++){
        Btn_shan[i].onclick=function(){
            let tr=this.parentNode.parentNode;
            // let fa = confirm('确认删除吗');
            // if (fa) {
                // 删除tr 
                tr.parentNode.removeChild(tr);
            // }
        }
    }
}

//添加
function Add() {
    //  给提交按钮绑定事件
        addEmpButton.addEventListener('click', function () {
        let test1=document.querySelector('#test>p:nth-child(1)>input').value;
        let test2=document.querySelector('#test>p:nth-child(2)>input').value;
        let test3=document.querySelector('#test>p:nth-child(3)>input').value;
        let test4=document.querySelector('#test>p:nth-child(4)>input').value;
        let test5=document.querySelector('#test>p:nth-child(5)>input').value;
        let test6=document.querySelector('#test>p:nth-child(6)>input').value;
        let test7=document.querySelector('#test>p:nth-child(7)>input').value;
        let test8=document.querySelector('#test>p:nth-child(8)>input').value;
        let test9=document.querySelector('#test1>input').name;
        //创建一个元素tr把用户输入的内容添加到tr元素内
        let tr = document.createElement('tr');
        // 设置tr中内容
        tr.innerHTML =
        `<td><input type="checkbox" name="" id=""></td>
        <td>1</td>
        <td>${test1}</td>
        <td>${test2}</td>
        <td>${test3}</td>
        <td>${test4}</td>
        <td>${test5}</td>
        <td>${test6}</td>
        <td>${test7}</td>
        <td>${test9}</td>
        <td>${test8}</td>
         <td><button>编辑</button><button>删除</button></td>`;
        let xinxi1=document.getElementById('xinxi');//获取table
        console.log(xinxi1);
        let tbody=xinxi1.getElementsByTagName('tbody')[0];
        //把创建的tr添加到第一个表格下面获取tbody第一个元素节点下面的兄弟元素
        tbody.appendChild(tr);

        let bt=tr.querySelector('button:nth-child(1)');//获取编辑按钮
        bt.onclick=function(){//给动态生成的编辑按钮添加事件
            display2.style.display='block';//显示添加内容区
            addEmpButton4.onclick=function(){//添加按钮内的提交按钮绑定事件
                display2.style.display='none';//点击提交后隐藏功能区
             }
             //获取点击指向对应的td内容
            let ps=this.parentNode.parentNode.children[2];
            let ps1=this.parentNode.parentNode.children[3];
            let ps2=this.parentNode.parentNode.children[4];
            let ps3=this.parentNode.parentNode.children[5];
            let ps4=this.parentNode.parentNode.children[6];
            let ps5=this.parentNode.parentNode.children[7];
            let ps6=this.parentNode.parentNode.children[8];
            let ps7=this.parentNode.parentNode.children[9];
             //获取修改页面的input.value值把获取到的td值赋值给修改框对应的值
            let test1=document.querySelector('#test2>p:nth-child(1)>input').value=ps.innerHTML;
            let test2=document.querySelector('#test2>p:nth-child(2)>input').value=ps1.innerHTML;;
            let test3=document.querySelector('#test2>p:nth-child(3)>input').value=ps2.innerHTML;;
            let test4=document.querySelector('#test2>p:nth-child(4)>input').value=ps3.innerHTML;;
            let test5=document.querySelector('#test2>p:nth-child(5)>input').value=ps4.innerHTML;;
            let test6=document.querySelector('#test2>p:nth-child(6)>input').value=ps5.innerHTML;;
            let test7=document.querySelector('#test2>p:nth-child(7)>input').value=ps6.innerHTML;;
            let test8=document.querySelector('#test2>p:nth-child(8)>input').value=ps7.innerHTML;

            for(let i=0;i<btn_BiAnJi.length;i++){//循环所有编辑按钮
                //获取点击指向的编辑按钮父级的父级下面的字节点
                let tr=this.parentNode.parentNode.children[2];
                let tr1=this.parentNode.parentNode.children[3];
                let tr2=this.parentNode.parentNode.children[4];
                let tr3=this.parentNode.parentNode.children[5];
                let tr4=this.parentNode.parentNode.children[6];
                let tr5=this.parentNode.parentNode.children[7];
                let tr6=this.parentNode.parentNode.children[8];
                let tr7=this.parentNode.parentNode.children[9];
                //获取修改页的value
                let tes1=document.querySelector('#test2>p:nth-child(1)>input');
                let tes2=document.querySelector('#test2>p:nth-child(2)>input');
                let tes3=document.querySelector('#test2>p:nth-child(3)>input');
                let tes4=document.querySelector('#test2>p:nth-child(4)>input');
                let tes5=document.querySelector('#test2>p:nth-child(5)>input');
                let tes6=document.querySelector('#test2>p:nth-child(6)>input');
                let tes7=document.querySelector('#test2>p:nth-child(7)>input');
                let tes8=document.querySelector('#test2>p:nth-child(8)>input');
                //
                addEmpButton3.onclick=function(){//给修改按钮绑定事件把获取到的value赋值给td内
                tr.innerHTML=tes1.value;
                tr1.innerHTML=tes2.value;
                tr2.innerHTML=tes3.value;
                tr3.innerHTML=tes4.value;
                tr4.innerHTML=tes5.value;
                tr5.innerHTML=tes6.value;
                tr6.innerHTML=tes7.value;
                tr7.innerHTML=tes8.value;
                display2.style.display='none';//点击修改完成隐藏修改页
               }
          
           }

        }
        
       
        let btnS=tr.querySelector('button:nth-child(2)');//获取动态添加的tr下面的删除按钮
            btnS.onclick=function(){//绑定点击事件生成的按钮重新绑定删除
            //    alert(btnS);
                let tr1=this.parentNode.parentNode;
                // let fa = confirm('确认删除吗');
                // if (fa) {
                    // 删除tr  removeChild()
                    tr1.parentNode.removeChild(tr);
                // }
            }

    });
}
//显示添加功能区
function DisplAy(){
     // 添加按钮点击显示
     console.log(zhaShang);
    zhaShang.onclick=function(){
    display1.style.display='block';
 }
   addEmpButton1.onclick=function(){
    display1.style.display='none';
 }

}

//编辑
function BiAnJi(){
    for(let i=0;i<btn_BiAnJi.length;i++){
        btn_BiAnJi[i].onclick=function(){
            display2.style.display='block';
            addEmpButton4.onclick=function(){
                display2.style.display='none';
             }
            
            let ps=this.parentNode.parentNode.children[2];
            let ps1=this.parentNode.parentNode.children[3];
            let ps2=this.parentNode.parentNode.children[4];
            let ps3=this.parentNode.parentNode.children[5];
            let ps4=this.parentNode.parentNode.children[6];
            let ps5=this.parentNode.parentNode.children[7];
            let ps6=this.parentNode.parentNode.children[8];
            let ps7=this.parentNode.parentNode.children[9];

            let test1=document.querySelector('#test2>p:nth-child(1)>input').value=ps.innerHTML;
            let test2=document.querySelector('#test2>p:nth-child(2)>input').value=ps1.innerHTML;;
            let test3=document.querySelector('#test2>p:nth-child(3)>input').value=ps2.innerHTML;;
            let test4=document.querySelector('#test2>p:nth-child(4)>input').value=ps3.innerHTML;;
            let test5=document.querySelector('#test2>p:nth-child(5)>input').value=ps4.innerHTML;;
            let test6=document.querySelector('#test2>p:nth-child(6)>input').value=ps5.innerHTML;;
            let test7=document.querySelector('#test2>p:nth-child(7)>input').value=ps6.innerHTML;;
            let test8=document.querySelector('#test2>p:nth-child(8)>input').value=ps7.innerHTML;
           
            for(let i=0;i<btn_BiAnJi.length;i++){
                let tr=this.parentNode.parentNode.children[2];
                let tr1=this.parentNode.parentNode.children[3];
                let tr2=this.parentNode.parentNode.children[4];
                let tr3=this.parentNode.parentNode.children[5];
                let tr4=this.parentNode.parentNode.children[6];
                let tr5=this.parentNode.parentNode.children[7];
                let tr6=this.parentNode.parentNode.children[8];
                let tr7=this.parentNode.parentNode.children[9];

              let tes1=document.querySelector('#test2>p:nth-child(1)>input');
              let tes2=document.querySelector('#test2>p:nth-child(2)>input');
              let tes3=document.querySelector('#test2>p:nth-child(3)>input');
              let tes4=document.querySelector('#test2>p:nth-child(4)>input');
              let tes5=document.querySelector('#test2>p:nth-child(5)>input');
              let tes6=document.querySelector('#test2>p:nth-child(6)>input');
              let tes7=document.querySelector('#test2>p:nth-child(7)>input');
              let tes8=document.querySelector('#test2>p:nth-child(8)>input');
                
                
                addEmpButton3.onclick=function(){
                tr.innerHTML=tes1.value;
                tr1.innerHTML=tes2.value;
                tr2.innerHTML=tes3.value;
                tr3.innerHTML=tes4.value;
                tr4.innerHTML=tes5.value;
                tr5.innerHTML=tes6.value;
                tr6.innerHTML=tes7.value;
                tr7.innerHTML=tes8.value;
                display2.style.display='none';
               }
          
           }
        }
    }
   
}

}